<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数值递增递减</title>
		<link rel="stylesheet" href="../css/numberstyle.css" />
	</head>
	<body>
		
		<div id="content">
			<input type="button" value="-">
			<input type="text" value="1">
			<input type="button" value="+">
		</div>
		
		<!--javascript:使用的标签script
		-->
		<script>
			/*事件委托：冒泡事件流*/
			/*得到元素*/
			var content=document.getElementById("content");
			content.onclick=function(e){/*使用function定义方法（函数），方法的参数，参数名自定义，参数表示是事件*/
				/*找到真正发生事件的元素*/
				var t=e.target;
				/*console.log(t)*/
				/*进行判断：如果时+，递增*/
				if(t.getAttribute("value")=="+"){
				  var previous=	t.previousElementSibling;/*前面的兄弟*/
				  /*console.log(previous);*/
				 var num=parseInt(previous.value);
				 if(num==10){
				 	 alert("数值超出范围");/*提示框*/
				 	 previous.value=10
				 }else{
				    previous.value=parseInt(previous.value)+1;
				 }
				}
				
				/*进行判断：如果时1，递减*/
				if(t.getAttribute("value")=="-"){
					var next=t.nextElementSibling;/*下一个兄弟*/
					 var num=parseInt(next.value);
				 if(num==1){
				 	 alert("数值超出范围");/*提示框*/
				 	 next.value=1
				 }else{
				    next.value=next.value-1;
				 }
				}
				
			}
		</script>
	</body>
</html>
